﻿<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"  %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="ApplicationPages" Namespace="Microsoft.SharePoint.ApplicationPages.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server"><SharePoint:ListProperty Property="TitleOrFolder" runat="server"/> - <SharePoint:ListProperty Property="CurrentViewTitle" runat="server"/></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
	<SharePoint:ListProperty Property="TitleBreadcrumb" runat="server"/>
	<SharePoint:UIVersionedContent UIVersion="4" runat="server">
		<ContentTemplate>
			<span class="ms-ltviewselectormenuheader" runat="server">
				<SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
			</span>
		</ContentTemplate>
	</SharePoint:UIVersionedContent>
</asp:Content>
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
	<SharePoint:RssLink runat="server" />
    <%--
    <link href="/_layouts/PepsiCo.RBS/dhtmlxgantt.css" rel="stylesheet" type="text/css" />
    <link href="/_layouts/PepsiCo.RBS/dhtmlxcalendar.css" rel="stylesheet" type="text/css" />
    <link href="/_layouts/PepsiCo.RBS/skins/dhtmlxcalendar_dhx_skyblue.css" rel="stylesheet" type="text/css" /> 
    <link href="/_layouts/PepsiCo.RBS/cupertino/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
    --%>

    <SharePoint:CssRegistration ID="CssRegistration1" After="corev4.css" name="<% $SPUrl:~SiteCollection/_layouts/PepsiCo.RBS/cupertino/jquery-ui-1.10.3.custom.css %>" runat="server"/> 
    <SharePoint:CssRegistration ID="CssRegistration2" After="corev4.css" name="<% $SPUrl:~SiteCollection/_layouts/PepsiCo.RBS/skins/dhtmlxcalendar_dhx_skyblue.css %>" runat="server"/> 
    <SharePoint:CssRegistration ID="CssRegistration3" After="corev4.css" name="<% $SPUrl:~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxcalendar.css %>" runat="server"/> 
    <SharePoint:CssRegistration ID="CssRegistration4" After="corev4.css" name="<% $SPUrl:~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxscheduler.css %>" runat="server" /> 
   

    <SharePoint:ScriptLink ID="ScriptLink1" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js" runat="server" />
    <SharePoint:Scriptlink ID="ScriptLink2" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery-ui-1.10.3.custom.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink3" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery.SPServices-0.7.2.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink4" Name="~SiteCollection/_layouts/PepsiCo.RBS/jquery.icheck.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink5" Name="~SiteCollection/_layouts/PepsiCo.RBS/colour-calendar.js?v=1.82" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink6" Name="~SiteCollection/_layouts/PepsiCo.RBS/url.min.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink7" Name="~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxscheduler.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink8" Name="~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxscheduler_timeline.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink9" Name="~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxscheduler_treetimeline.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink10" Name="~SiteCollection/_layouts/PepsiCo.RBS/dhtmlxcalendar.js" runat="Server" />
    <SharePoint:Scriptlink ID="ScriptLink11" Name="~SiteCollection/_layouts/PepsiCo.RBS/moment.min.js" runat="Server" />


    <%--    
    <script src="/_layouts/PepsiCo.RBS/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/jquery.icheck.min.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/colour-calendar.js?v=1.7" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/url.min.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/dhtmlxgantt.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/dhtmlxcalendar.js" type="text/javascript"></script>
    <script src="/_layouts/PepsiCo.RBS/moment.min.js" type="text/javascript"></script>
    --%>

</asp:content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"><SharePoint:ViewIcon Width="145" Height="54" runat="server" /></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
<SharePoint:RecentChangesMenu runat="server" id="RecentChanges"/>
<SharePoint:ModifySettingsLink runat="server" />
</asp:Content>
<asp:Content ContentPlaceHolderId ="PlaceHolderBodyLeftBorder" runat="server">
 <div height="100%" class="ms-pagemargin"><img src="/_layouts/images/blank.gif" width='6' height='1' alt="" /></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

    <script type="text/javascript">
        //disable drag and drop
        ExecuteOrDelayUntilScriptLoaded(fixupDrag, 'SP.UI.ApplicationPages.Calendar.js');
        function fixupDrag() {
            var calendarCreate = SP.UI.ApplicationPages.CalendarContainerFactory.create;
            SP.UI.ApplicationPages.CalendarContainerFactory.create = function (elem, cctx, viewType, date, startupData) {
                if (cctx.dataSources && cctx.dataSources instanceof Array && cctx.dataSources.length > 0) {
                    for (var i = 0; i < cctx.dataSources.length; i++) {
                        cctx.dataSources[i].disableDrag = true;
                    }
                }
                calendarCreate(elem, cctx, viewType, date, startupData);
            }
        }
    </script>

    <%--<script src="/rbs/_layouts/PepsiCo.RBS/dhtmlxcommon.js" type="text/javascript"></script>--%>
    <%--<script src="/rbs/_layouts/PepsiCo.RBS/dhtmlxgantt.js" type="text/javascript"></script>--%>
    <%--<link href="/rbs/_layouts/PepsiCo.RBS/dhtmlxgantt.css" rel="stylesheet" type="text/css" />--%>

    <style type="text/css">
	    .listRooms li{float:left; margin-left: 20px;}
	    .roomList {
		    background: none repeat scroll 0 0 #FFFFFF;
		    padding: 10px 0 0 10px;
		    position: relative;
		    float: left;
	    }
	    .roomList ul {
		    float: left;
		    padding:0;
		    white-space: nowrap;
		    list-style-type: none;
		    list-style-image: none;
		    font-size: 14px;
	    }
	    .roomList ul:first-child {
		    float: left;
	    }
	    .roomList ul li {
		    padding: 0 0 18px 42px;
		    position: relative;
	    }
	    .roomList ul li input {
		    display:none;
	    }
	    .roomList ul input {
		    left: 0;
		    position: absolute;
		    top: 4px;
	    }
	    .roomList ul .vcheckbox {
		    left: 0;
		    position: absolute;
		    top: -1px;
	    }
	    .roomList ul span {
		    color: #BBBBBB;
	    }
	
	    .vcheckbox {
		    border: 1px solid #BBBBBB;
		    cursor: pointer;
		    display: block;
		    height: 22px;
		    margin: 0;
		    padding: 0;
		    width: 22px;
	    }
	    .vcheckbox.checked {
		    background-color: #BBBBBB;
	    }
	    .ms-acal-apanel-outer
	    {
	        display:none;    
	    }
	    #DatePickerDiv
	    {
	        margin-bottom: 20px;    
	    }
	    .ms-acal-vitem {
            background-color: #D3E0F0 !important;
        }
        .ui-tooltip{
            max-width: 400px;
            width: 400px;
            }
            
        .dhx_cal_tab
        {
            display:none !important;
        }
        .calTitle{
            padding: 10px 0 0 30px;
        }
        .ms-acal-vlink
        {
            z-index: 99;
        }
        
        .btnShowGantt, .btnHideGantt
        {
            margin-left: 10px; 
            background-color: #30A4D9; 
            color: #FFF;
        }
        .btnShowGantt:hover, .btnHideGantt:hover
        {
            background-color: #0080B9; 
        }
        .ms-acal-week-top td {
          border: 2px solid #D9DDE1;
        }
        .ms-acal-hour30 td, .ms-acal-hour00 td, .ms-acal-allday td {
          border-left: 2px solid #D9DDE1;
          border-right: 2px solid #D9DDE1;
        }
        .ms-acal-today-custom {
          background-color: #E4F4FF;
        }
        .ms-acal-today-custom.ms-acal-outday {
          background-color: #D7EFFF;
        }
    </style>

    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <div class="calTitle ms-rteThemeForeColor-7-0 ms-rteFontSize-4">
                    Book Events
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <div style="border: 0px solid red; text-align:center;" class="roomList clear">
	                <div>
		                <ul class="listRooms">
			                <%--<li>
				                <input type="checkbox" id="v-flat-checkbox-1" value="#FF0000" checked="checked" />
				                <label for="v-flat-checkbox-1">7Up</label>
				                <div class="roomColor" style="display:none;">#FF0000</div>
				            </li>
			                <li>
				                <input type="checkbox" id="v-flat-checkbox-2" value="#FFFF00" checked="checked" />
				                <label for="v-flat-checkbox-2">Pepsi</label>
				                <div class="roomColor" style="display:none;">#FFFF00</div>
			                </li>
			                <li>
				                <input type="checkbox" id="v-flat-checkbox-3" value="#FF00FF" checked="checked" />
				                <label for="v-flat-checkbox-3">Aquafina</label>
				                <div class="roomColor" style="display:none;">#FF00FF</div>
			                </li>
			                <li>
				                <input type="checkbox" id="v-flat-checkbox-4" value="#00FF00" checked="checked" />
				                <label for="v-flat-checkbox-4">Sting</label>
				                <div class="roomColor" style="display:none;">#00FF00</div>
			                </li>
			                <li>
				                <input type="checkbox" id="v-flat-checkbox-5" value="#00FFFF" checked="checked" />
				                <label for="v-flat-checkbox-5">Miranda</label>
				                <div class="roomColor" style="display:none;">#00FFFF</div>
			                </li>
			                <li>
				                <input type="checkbox" id="v-flat-checkbox-6" value="#0000FF" checked="checked" />
				                <label for="v-flat-checkbox-6">Twister</label>
				                <div class="roomColor" style="display:none;">#0000FF</div>
			                </li>--%>
		                </ul>
	                </div>
                </div>
                <div style="clear:both;"></div>
            </td>
        </tr>

        <tr>
            <td>
               <div style="font-size:12px;padding: 0 10px;">
                    <div style="float:left;padding-top: 5px;">
                        <span class="label">Check resources on date:</span> 
                        <input type="text" id="date_from" style="width: 120px;" readonly="true" />
                        <span class="label" style="display: none;"> to </span>
                        <input type="text" style="display: none;" id="date_to" style="width: 120px;" onclick="setSens('date_from', 'min');" readonly="true" />
                    </div>
                    <div class="dhx_cal_today_button btnShowGantt" style="float:left;">View</div>
                    <div class="dhx_cal_today_button btnHideGantt" style="float:left; display:none;">Hide</div>

                    <div style="clear:both"></div>

                    <div style="display: none;">
                        <span>Choose type:</span>
                        <input id="radioDay" type="radio" value="Today" checked="checked" name="GantType" />Date
                        <input id="radioWeek" type="radio" value="Week" name="GantType" />Week
                        <input id="radioMonth" type="radio" value="Month" name="GantType" />Month
                    </div>
                </div>
                <div class="schedule_area" style="min-height: 190px; padding-left: 10px;">
                    <div id="scheduler_here" class="dhx_cal_container" style="width: 100%; height: 500px;">
                        <div class="dhx_cal_navline">
                            <div class="dhx_cal_prev_button">&nbsp;</div>
			                <div class="dhx_cal_next_button">&nbsp;</div>
			                <div class="dhx_cal_today_button"></div>
                            <div class="dhx_cal_date"></div>
                            <div class="dhx_cal_tab" name="day_tab" style="right:204px; display:none;" ></div>
			                <div class="dhx_cal_tab" name="week_tab" style="right:140px; display:none;" ></div>
			                <div class="dhx_cal_tab" name="timeline_tab" style="right:50px;" ></div>
			                <div class="dhx_cal_tab" name="month_tab" style="right:76px; display:none;" ></div>
                        </div>
                        <div class="dhx_cal_header">
		                </div>
		                <div class="dhx_cal_data">
		                </div>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                &nbsp;
            </td>
        </tr>

        <tr>
            <td>
                <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main" />
            </td>
        </tr>

    </table>

    <style type="text/css">
    .tooltip-cal-container{font-size:8pt; font-family: Verdana,Arial,sans-serif;}
    .tooltip-cal-container-sub{font-size:8pt; font-family: Verdana,Arial,sans-serif;color: Green}
    .tooltip-cal-container-waiting-list{font-size:8pt; font-family: Verdana,Arial,sans-serif;color: Green; font-weight:bold; padding-top: 20px;}
    
    .tooltip-cal td{padding: 3px 0; vertical-align: top;}
    
    
    .dhx_matrix_scell.folder .dhx_scell_name{color: White;}
    .dhx_matrix_scell.folder .dhx_scell_expand{color: White;}
    </style>

    <script type="text/javascript">
    
        var inputHtml = "<input type='checkbox' id='v-flat-checkbox-{0}' value='{1}' checked='checked' />";
        var labelHtml = "<label for='v-flat-checkbox-{0}'>{1}</label>";
        var divHtml = "<div class='roomColor' style='display:none;'>{0}</div>";
        //var pepsiEvents = {};
        //var jsonData = "{-1} id: {0}, pepsico: '{1}', start_date: '{2}', duration: {3}, open: true, parent: {4} {-2}";

        String.prototype.format = function (args) {
            var str = this;
            return str.replace(String.prototype.format.regex, function (item) {
                var intVal = parseInt(item.substring(1, item.length - 1));
                var replace;
                if (intVal >= 0) {
                    replace = args[intVal];
                } else if (intVal === -1) {
                    replace = "{";
                } else if (intVal === -2) {
                    replace = "}";
                } else {
                    replace = "";
                }
                return replace;
            });
        };
        String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");

        //var str = "She {1} {0}{2} by the {0}{3}. {-1}^_^{-2}";
        //str = str.format(["sea", "sells", "shells", "shore"]);
        //alert(str);

        function RenderCalendarTooltip(strTitle, strUser, strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest) {
            var arrResource = strResourceRequest.split(';#'),
                strResource = '';

            for (var i = 1; i < arrResource.length; i = i+2 ) {
                strResource += arrResource[i] + (i < arrResource.length - 1 ? ", " : "");
            }

            return "<div class='tooltip-cal-container' style='width:100%;'><div style='font-weight:bold;padding: 5px 0;'>" + strTitle + "</div><div><table class='tooltip-cal' border='0' width='100%' cellpadding='0' cellspacing='0'><tr><td width='100px'>Booked By</td><td>:&nbsp; </td><td>" + strUser + "</td></tr><tr><td>Email</td><td>:&nbsp; </td><td>" + strEmail + "</td><tr><td>Ext / Cell phone</td><td>:&nbsp; </td><td>" + strPhoneNumber + "</td></tr><tr><td>Location</td><td>:&nbsp; </td><td>" + strLocation + "</td></tr><tr><td>Start Time</td><td>:&nbsp; </td><td>" + strEventDate + "</td></tr><tr><td>End Time</td><td>:&nbsp; </td><td>" + strEndDate + "</td></tr>" + (strResource ? ("<tr><td>Resources</td><td>:&nbsp; </td><td>" + strResource + "</td></tr>") : "") + "</table></div></div>";
        }

        function RenderCalendarTooltipWaitingList(strTitle, strUser, strEventDate, strEndDate) {
            return "<div class='tooltip-cal-container-sub' style='width:100%;'><div><table class='tooltip-cal' border='0' width='100%' cellpadding='0' cellspacing='0'><tr><td width='100px' style='font-weight:bold;'>Waiting item</td><td>:&nbsp; </td><td style='font-weight:bold;'>" + strTitle + "</td></tr><tr><td>Booked By</td><td>:&nbsp; </td><td>" + strUser + "</td></tr><tr><td>Start Time</td><td>:&nbsp; </td><td>" + strEventDate + "</td></tr><tr><td>End Time</td><td>:&nbsp; </td><td>" + strEndDate + "</td></tr></table></div></div>";
        }

        $(document).ready(function () {
            //tooltip
            $(document).tooltip({
                items: ".ms-acal-item",
                track: true,
                content: function () {
                    var element = $(this),
                        rawItemId = new Url($(this).find("a").attr("href")).query.ID,
                        itemId = rawItemId.split(".")[0],
                        startDate = '';

                    var html = '';

                    if (rawItemId.split(".").length > 0 && rawItemId.split(".")[1] == 0) {
                        startDate = rawItemId.split(".")[2];
                    }

                    if (itemId) {
                        if (startDate) {
                            var newStartDate = moment(startDate).format("YYYY-MM-DD HH:mm:ss Z")

                            $().SPServices({
                                operation: "GetListItems",
                                async: false,
                                listName: "Book Events",
                                CAMLViewFields: "<ViewFields>" +
                                                    "<FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' />" +
                                                    "<FieldRef Name='EventDate' />" +
                                                    "<FieldRef Name='EndDate' />" +
                                                    "<FieldRef Name='Location' />" +
			                                        "<FieldRef Name='ResourceRequest' />" +
			                                        "<FieldRef Name='MeetingRoom' />" +
                                                    "<FieldRef Name='Description' />" +
                                                    "<FieldRef Name='fRecurrence' />" +
                                                    "<FieldRef Name='RecurrenceData' />" +
                                                "</ViewFields>",
                                CAMLQuery: "<Query>" +
                                                    "<Where>" +
                                                        "<And>" +
                                                            "<Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemId + "</Value></Eq>" +
                                                            "<DateRangesOverlap>" +
                                                                "<FieldRef Name='EventDate' />" +
                                                                "<FieldRef Name='EndDate' />" +
                                                                "<FieldRef Name='RecurrenceID' />" +
                                                                "<Value Type='DateTime'>" +
                                                                    "<Today/>" +
                                                                "</Value>" +
                                                            "</DateRangesOverlap>" +
                                                        "</And>" +
                                                    "</Where>" +
                                                    "<OrderBy>" +
                                                        "<FieldRef Name='EventDate' />" +
                                                    "</OrderBy>" +
                                                "</Query>",
                                CAMLQueryOptions: "<QueryOptions>" +
                                                    "<CalendarDate>" + newStartDate + "</CalendarDate>" +
                                                    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
                                                    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                                                "</QueryOptions>",
                                completefunc: function (xData, Status) {
                                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                        var strTitle = $(this).attr("ows_Title"),
                                            strUser = $(this).attr("ows_User"),
                                            strEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                            strPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                            strLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                            dtEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss"),
                                            strEventDate = dtEventDate.format("MMMM DD YYYY, hh:mm A"),
                                            dtEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss"),
                                            strEndDate = dtEndDate.format("MMMM DD YYYY, hh:mm A"),
                                            strResourceRequest = '',
                                            strMeetingRoomId = $(this).attr("ows_MeetingRoom").split(';#')[0];

                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Meeting Rooms",
                                            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AvailableResources' /></ViewFields>",
                                            CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + strMeetingRoomId + "</Value></Eq></Where></Query>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    strResourceRequest = $(this).attr("ows_AvailableResources");
                                                });
                                            }
                                        });

                                        if ($.trim(strResourceRequest) != '' && $.trim($(this).attr("ows_ResourceRequest")) != '') strResourceRequest += ";#";
                                        strResourceRequest += $(this).attr("ows_ResourceRequest");

                                        html = RenderCalendarTooltip(strTitle, strUser.split(';#')[1], strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest);

                                        //get more items in Waiting list
                                        var countItemsWaitingList = 0;
                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Waiting List",
                                            CAMLViewFields: "<ViewFields>" +
                                                    "<FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' />" +
                                                    "<FieldRef Name='EventDate' />" +
                                                    "<FieldRef Name='EndDate' />" +
                                                    "<FieldRef Name='Location' />" +
			                                        "<FieldRef Name='ResourceRequest' />" +
			                                        "<FieldRef Name='MeetingRoom' />" +
                                                    "<FieldRef Name='Description' />" +
                                                    "<FieldRef Name='fRecurrence' />" +
                                                    "<FieldRef Name='RecurrenceData' />" +
                                                "</ViewFields>",
                                            CAMLQuery: "<Query>" +
                                                    "<Where>" +
                                                        "<And>" +
                                                            "<Eq><FieldRef Name='MeetingRoom' LookupId='TRUE'/><Value Type='Lookup'>" + strMeetingRoomId + "</Value></Eq>" +
                                                            "<DateRangesOverlap>" +
                                                                "<FieldRef Name='EventDate' />" +
                                                                "<FieldRef Name='EndDate' />" +
                                                                "<FieldRef Name='RecurrenceID' />" +
                                                                "<Value Type='DateTime'>" +
                                                                    "<Today/>" +
                                                                "</Value>" +
                                                            "</DateRangesOverlap>" +
                                                        "</And>" +
                                                    "</Where>" +
                                                    "<OrderBy>" +
                                                        "<FieldRef Name='EventDate' />" +
                                                    "</OrderBy>" +
                                                "</Query>",
                                            CAMLQueryOptions: "<QueryOptions>" +
                                                    "<CalendarDate>" + newStartDate + "</CalendarDate>" +
                                                    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
                                                    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                                                "</QueryOptions>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    var strWaitTitle = $(this).attr("ows_Title"),
                                                        strWaitUser = $(this).attr("ows_User"),
                                                    //strWaitEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                                    //strWaitPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                                    //strWaitLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                                        dtWaitEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss"),
                                                        strWaitEventDate = dtWaitEventDate.format("MMMM DD YYYY, hh:mm A"),
                                                        dtWaitEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss"),
                                                        strWaitEndDate = dtWaitEndDate.format("MMMM DD YYYY, hh:mm A");

                                                    //                                                    console.log("dtWaitEventDate: " + dtWaitEventDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtEventDate: " + dtEventDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtWaitEndDate: " + dtWaitEndDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtEndDate: " + dtEndDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("-------------------");

                                                    if ((dtWaitEventDate >= dtEventDate && dtWaitEventDate < dtEndDate) || (dtWaitEndDate > dtEventDate && dtWaitEndDate <= dtEndDate)) {

                                                        if (countItemsWaitingList == 0) {
                                                            html += "<div class='tooltip-cal-container-waiting-list'></div>"
                                                        }

                                                        html += RenderCalendarTooltipWaitingList(strWaitTitle, strWaitUser.split(';#')[1], strWaitEventDate, strWaitEndDate);

                                                        countItemsWaitingList++;
                                                        if (countItemsWaitingList == 2) return false; //break each loop
                                                    }
                                                });
                                            }
                                        });
                                    });
                                }
                            });
                        }
                        else {
                            $().SPServices({
                                operation: "GetListItems",
                                async: false,
                                listName: "Book Events",
                                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' /><FieldRef Name='Location' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='ResourceRequest' /><FieldRef Name='MeetingRoom' /></ViewFields>",
                                CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + itemId + "</Value></Eq></Where></Query>",
                                completefunc: function (xData, Status) {
                                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                        var strTitle = $(this).attr("ows_Title"),
                                            strUser = $(this).attr("ows_User"),
                                            strEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                            strPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                            strLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                            dtEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss"),
                                            strEventDate = dtEventDate.format("MMMM DD YYYY, hh:mm A"),
                                            dtEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss"),
                                            strEndDate = dtEndDate.format("MMMM DD YYYY, hh:mm A"),
                                            strResourceRequest = '',
                                            strMeetingRoomId = $(this).attr("ows_MeetingRoom").split(';#')[0];

                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Meeting Rooms",
                                            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='AvailableResources' /></ViewFields>",
                                            CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>" + strMeetingRoomId + "</Value></Eq></Where></Query>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    strResourceRequest = $(this).attr("ows_AvailableResources");
                                                });
                                            }
                                        });

                                        if ($.trim(strResourceRequest) != '' && $.trim($(this).attr("ows_ResourceRequest")) != '') strResourceRequest += ";#";
                                        strResourceRequest += $(this).attr("ows_ResourceRequest");

                                        html = RenderCalendarTooltip(strTitle, strUser.split(';#')[1], strEmail, strPhoneNumber, strLocation, strEventDate, strEndDate, strResourceRequest);

                                        //get more items in Waiting list
                                        var countItemsWaitingList = 0;
                                        $().SPServices({
                                            operation: "GetListItems",
                                            async: false,
                                            listName: "Waiting List",
                                            CAMLViewFields: "<ViewFields>" +
                                                    "<FieldRef Name='Title' /><FieldRef Name='User' /><FieldRef Name='Email' /><FieldRef Name='PhoneNumber' />" +
                                                    "<FieldRef Name='EventDate' />" +
                                                    "<FieldRef Name='EndDate' />" +
                                                    "<FieldRef Name='Location' />" +
			                                        "<FieldRef Name='ResourceRequest' />" +
			                                        "<FieldRef Name='MeetingRoom' />" +
                                                    "<FieldRef Name='Description' />" +
                                                    "<FieldRef Name='fRecurrence' />" +
                                                    "<FieldRef Name='RecurrenceData' />" +
                                                "</ViewFields>",
                                            CAMLQuery: "<Query>" +
                                                    "<Where>" +
                                                        "<And>" +
                                                            "<Eq><FieldRef Name='MeetingRoom' LookupId='TRUE'/><Value Type='Lookup'>" + strMeetingRoomId + "</Value></Eq>" +
                                                            "<DateRangesOverlap>" +
                                                                "<FieldRef Name='EventDate' />" +
                                                                "<FieldRef Name='EndDate' />" +
                                                                "<FieldRef Name='RecurrenceID' />" +
                                                                "<Value Type='DateTime'>" +
                                                                    "<Today/>" +
                                                                "</Value>" +
                                                            "</DateRangesOverlap>" +
                                                        "</And>" +
                                                    "</Where>" +
                                                    "<OrderBy>" +
                                                        "<FieldRef Name='EventDate' />" +
                                                    "</OrderBy>" +
                                                "</Query>",
                                            CAMLQueryOptions: "<QueryOptions>" +
                                                    "<CalendarDate>" + dtEventDate.format("YYYY-MM-DD HH:mm:ss Z") + "</CalendarDate>" +
                                                    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
                                                    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                                                "</QueryOptions>",
                                            completefunc: function (xData, Status) {
                                                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                                                    var strWaitTitle = $(this).attr("ows_Title"),
                                                        strWaitUser = $(this).attr("ows_User"),
                                                    //strWaitEmail = $(this).attr("ows_Email") ? $(this).attr("ows_Email") : '',
                                                    //strWaitPhoneNumber = $(this).attr("ows_PhoneNumber") ? $(this).attr("ows_PhoneNumber") : '',
                                                    //strWaitLocation = $(this).attr("ows_Location") ? $(this).attr("ows_Location") : '',
                                                        dtWaitEventDate = moment($(this).attr("ows_EventDate"), "YYYY-MM-DD HH:mm:ss"),
                                                        strWaitEventDate = dtWaitEventDate.format("MMMM DD YYYY, hh:mm A"),
                                                        dtWaitEndDate = moment($(this).attr("ows_EndDate"), "YYYY-MM-DD HH:mm:ss"),
                                                        strWaitEndDate = dtWaitEndDate.format("MMMM DD YYYY, hh:mm A");

                                                    //                                                    console.log("dtWaitEventDate: " + dtWaitEventDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtEventDate: " + dtEventDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtWaitEndDate: " + dtWaitEndDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("dtEndDate: " + dtEndDate.format("MMMM DD YYYY, hh:mm A"));
                                                    //                                                    console.log("-------------------");

                                                    if ((dtWaitEventDate >= dtEventDate && dtWaitEventDate < dtEndDate) || (dtWaitEndDate > dtEventDate && dtWaitEndDate <= dtEndDate)) {

                                                        if (countItemsWaitingList == 0) {
                                                            html += "<div class='tooltip-cal-container-waiting-list'></div>"
                                                        }

                                                        html += RenderCalendarTooltipWaitingList(strWaitTitle, strWaitUser.split(';#')[1], strWaitEventDate, strWaitEndDate);

                                                        countItemsWaitingList++;
                                                        if (countItemsWaitingList == 2) return false; //break each loop
                                                    }
                                                });
                                            }
                                        });
                                    });
                                }
                            });
                        }

                    }


                    return html;
                },
                open: function (e, ui) {
                    $(".ui-tooltip").not($(ui.tooltip)).remove();
                }
            });

            setInterval(function () {
                if (SP.UI.ModalDialog.get_childDialog() != null) {
                    $(".ui-tooltip").remove();
                }
            }, 1000);

            $('.listRooms input').on('ifChecked ifUnchecked ifCreated', function (event) {
                if (event.type == 'ifChecked') {
                    var color = $(this).parents("li:last").find(".roomColor").text();
                    $(this).parent().css("background-color", color);

                }
                else if (event.type == 'ifUnchecked') {
                    $(this).parent().css("background-color", "transparent");

                }
                else if (event.type == 'ifCreated') {
                    if ($(this).prop('checked')) {
                        var color = $(this).parents("li:last").find(".roomColor").text();
                        $(this).parent().css("background-color", color);
                    }
                }

                ColourCalendarItem($(this).val());
                //log status
                //$('.listRooms input').each(function () {
                //    console.log($(this).attr("id") + ": " + $(this).prop('checked') + " --- Value: " + $(this).val());
                //});
                //console.log("----------------------------------------------------");

            }).iCheck({
                checkboxClass: 'vcheckbox'
            });

            function ColourCalendarItem(color, checked) {
                $("div.ms-acal-item[colour = '" + color + "']").each(function () {

                    $(this).toggle();

                });
            }


        });


        $().SPServices({
            operation: "GetListItems",
            async: false,
            webURL: $().SPServices.SPGetCurrentSite(),
            listName: "Meeting Rooms",
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='IsOutside' /><Value Type='Boolean'>0</Value></Eq></Where></Query>",
            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Color' /></ViewFields>",
            completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function () {
                    var liHtml = "<li>";
                    liHtml += inputHtml.format([$(this).attr("ows_ID"), $(this).attr("ows_Color")]);
                    liHtml += labelHtml.format([$(this).attr("ows_ID"), $(this).attr("ows_Title")]);
                    liHtml += divHtml.format([$(this).attr("ows_Color")]);
                    liHtml += "</li>";
                    $(".listRooms").append(liHtml);
                    //alert(liHtml);
                });
            }
        });

        String.prototype.format = String.prototype.f = function () {
            var s = this, i = arguments.length;

            while (i--) {
                s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
            }
            return s;
        };

        
        var myCalendar;
        function doOnLoad() {
            myCalendar = new dhtmlXCalendarObject(["date_from", "date_to"]);
            myCalendar.hideTime();
            myCalendar.setDateFormat("%F %d %Y");
            var defaultDay = new Date();
            myCalendar.setWeekStartDay(1);
            myCalendar.hideTime();
            // init values
            var t = moment(new Date());
            byId("date_from").value = t.format("MMMM DD YYYY");
            byId("date_to").value = t.endOf('week').add('days', 1).format("MMMM DD YYYY");
        }

        function setSens(id, k) {
            // update range
            if (k == "min") {
                myCalendar.setSensitiveRange(byId(id).value, null);
            } else {
                myCalendar.setSensitiveRange(null, byId(id).value);
            }
        }
        function byId(id) {
            return document.getElementById(id);
        }
        
        String.prototype.format = function (args) {
            var str = this;
            return str.replace(String.prototype.format.regex, function (item) {
                var intVal = parseInt(item.substring(1, item.length - 1));
                var replace;
                if (intVal >= 0) {
                    replace = args[intVal];
                } else if (intVal === -1) {
                    replace = "{";
                } else if (intVal === -2) {
                    replace = "}";
                } else {
                    replace = "";
                }
                return replace;
            });
        };
        String.prototype.format.regex = new RegExp("{-?[0-9]+}", "g");

        $(document).ready(function () {
            //Load calendar
            doOnLoad();
            initScheduler();
            $(".schedule_area").hide();
            var oldSelectedDate = moment().format("D MMM YYYY");
            $(".dhx_cal_date").bind("DOMSubtreeModified propertychange", function () {
                var selectedDate = $(this).text().split(" - ")[1];

                //console.log("1 selectedDate: " + moment(selectedDate, "MMMM DD YYYY"));

                if (oldSelectedDate != selectedDate) {
                    oldSelectedDate = selectedDate;
                    var f = moment(selectedDate, "MMMM DD YYYY");
                    ShowScheduler(f);
                }
                return false;
            });

            $(".btnShowGantt").click(function () {
                $(".btnHideGantt").show();
                $(".schedule_area").show();

                var f = moment($("#date_from").val());
                oldSelectedDate = f.format("D MMM YYYY");

                //console.log("2 selectedDate: " + oldSelectedDate);

                ShowScheduler(f);
                //init();
                //$(".dhx_cal_date").html(f.format("DD MMM YYYY"));
                //ShowScheduler();
                return false;
            });

            $(".btnHideGantt").click(function () {
                $(this).hide();
                $(".schedule_area").hide();

                return false;
            });

            $("#scheduler_here").hide();

            //$(".").css("background-color", "yellow");
        });

    </script>

    <script type="text/javascript" charset="utf-8">

        function BuildTreeSection() {
            GetElementMeetingRooms();
            GetElementResources();
            var treeElements = [{ key: 30, label: "Meeting Rooms", open: true, children: ELEMENTMEETINGROOMS
            },
			                { key: 31, label: "Resources", open: true, children: ELEMENTRESOURCES
			                }
		                ];

            //console.log(treeElements);
            return treeElements;
        }
        
        //Get list rooms -> tree
        var ELEMENTMEETINGROOMS = [];
        var ELEMENTMEETINGROOMCOLOR = {};
        function GetElementMeetingRooms() {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                webURL: $().SPServices.SPGetCurrentSite(),
                listName: "Meeting Rooms",
                // CAMLQuery: "<Query><Where><Eq><FieldRef Name='IsActive' /><Value Type='Boolean'>1</Value></Eq></Where></Query>",
                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Color' /></ViewFields>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        //MEETINGROOMS[$(this).attr("ows_ID")] = $(this).attr("ows_Color") + "|||" + $(this).attr("ows_Title");
                        //alert(MEETINGROOMS[(this).attr("ows_ID")]);
                        ELEMENTMEETINGROOMS.push({ key: $(this).attr("ows_ID"), label: $(this).attr("ows_Title") });
                        ELEMENTMEETINGROOMCOLOR[$(this).attr("ows_ID")] = $(this).attr("ows_Color");
                    });
                }
            });
        }

        //Get list resources -> tree
        var ELEMENTRESOURCES = [];
        function GetElementResources() {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                webURL: $().SPServices.SPGetCurrentSite(),
                listName: "Resources",
                CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='IsActive' /><Value Type='Boolean'>1</Value></Eq><Eq><FieldRef Name='IsPrivate' /><Value Type='Boolean'>0</Value></Eq></And></Where></Query>",
                CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        //RESOURCES[$(this).attr("ows_ID")] = $(this).attr("ows_Title");
                        ELEMENTRESOURCES.push({ key: parseInt($(this).attr("ows_ID")) + 31, label: $(this).attr("ows_Title") });
                    });
                }
            });
        }

        //Get events
        var ELEMENTMEETINGEVENTS = [];
        function GetElementMeetingEvents(datecal) {
            //console.log(datecal.format("YYYY-MM-DD"));

            //alert(datecal.format("YYYY-MM-DD"));
            //alert(count);
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: "Book Events",
                CAMLViewFields: "<ViewFields>" +
                    "<FieldRef Name='Title' />" +
                    "<FieldRef Name='EventDate' />" +
                    "<FieldRef Name='EndDate' />" +
                    "<FieldRef Name='Location' />" +
			        "<FieldRef Name='ResourceRequest' />" +
			        "<FieldRef Name='MeetingRoom' />" +
                    "<FieldRef Name='Description' />" +
                    "<FieldRef Name='fRecurrence' />" +
                    "<FieldRef Name='RecurrenceData' />" +
                "</ViewFields>",
                CAMLQuery: "<Query>" +
                    "<Where>" +
                        "<DateRangesOverlap>" +
                            "<FieldRef Name='EventDate' />" +
                            "<FieldRef Name='EndDate' />" +
                            "<FieldRef Name='RecurrenceID' />" +
                            "<Value Type='DateTime'>" +
                                "<Today />" +
                            "</Value>" +
                        "</DateRangesOverlap>" +
                    "</Where>" +
                    "<OrderBy>" +
                        "<FieldRef Name='EventDate' />" +
                    "</OrderBy>" +
                "</Query>",
                CAMLQueryOptions: "<QueryOptions>" +
                    "<CalendarDate>" + datecal.format("YYYY-MM-DD") + "</CalendarDate>" +
                    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
                    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                "</QueryOptions>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function () {
                        var owsStartDate = $(this).attr("ows_EventDate");
                        var owsEndDate = $(this).attr("ows_EndDate");

                        var startDateValue = moment(owsStartDate);
                        var endDateValue = moment(owsEndDate);

                        var owsUser = $(this).attr("ows_User").split(';#');
                        var eventTitle = /*startDateValue.format("HH:mm") + "-" + endDateValue.format("HH:mm") + " " + */ $(this).attr("ows_Title") + " - " + owsUser[1]; //owsUser[1] + " - " + $(this).attr("ows_Title");
                        var meetingRoomID = 0;
                        var owsMeetingRoom = $(this).attr("ows_MeetingRoom");
                        var colorEvent = "";
                        //alert(owsMeetingRoom);
                        if (!($.isEmptyObject(owsMeetingRoom))) {

                            var meetingRoomArray = owsMeetingRoom.split(';#');
                            meetingRoomID = meetingRoomArray[0];
                            //alert(meetingRoomArray[1]);
                            colorEvent = ELEMENTMEETINGROOMCOLOR[meetingRoomID];
                            ELEMENTMEETINGEVENTS.push({ start_date: startDateValue.format("YYYY-MM-DD HH:mm"), end_date: endDateValue.format("YYYY-MM-DD HH:mm"), text: eventTitle, section_id: meetingRoomID, color: colorEvent });
                        }
                        //alert(startDateValue.format("YYYY-MM-DD HH:mm"));
                        var owsResourceRequest = $(this).attr("ows_ResourceRequest");
                        //alert(owsResourceRequest);
                        if (!($.isEmptyObject(owsResourceRequest))) {

                            var resourceArray = owsResourceRequest.split(';#');
                            for (var i = 0; i < resourceArray.length; i++) {
                                if ((i % 2) == 0) {
                                    //alert(resourceArray[i]);
                                    //PEPSIRESOURCES.data.push({ id: count, text: resourceArray[i], pepsico: resourceArray[1], starthour: startDateValue.format("hh:mm"), endhour: endDateValue.format("hh:mm"), owner: $(this).attr("ows_User").split(';#')[1], start_date: startDateValue, duration: owsDuration, parent: resourceParent, meetingroom: meetingRoomID });
                                    //pepsicoresourceString += "id:" + count + ", text:" + resourceArray[1] + ", starthour:" + startDateValue.format("hh:mm") + ", endhour:" + endDateValue.format("hh:mm") + ", owner: " + $(this).attr("ows_User").split(';#')[1] + ", start_date:" + startDateValue.format("DD-MM-YYYY") + ", duration:" + owsDuration + ", parent:" + resourceParent + ", meetingroom:" + meetingRoomID + "####";
                                    ELEMENTMEETINGEVENTS.push({ start_date: startDateValue.format("YYYY-MM-DD HH:mm"), end_date: endDateValue.format("YYYY-MM-DD HH:mm"), text: eventTitle, section_id: parseInt(resourceArray[i]) + 31, color: colorEvent });
                                }
                            }
                        }

                    });
                }
            });
        }

        function ShowScheduler(selectedDate) {
            $("#scheduler_here").show();
            //var f = moment($("#date_from").val());
            //var t = moment($("#date_to").val());
            //var dateCount = (t - f) / (1000 * 60 * 60 * 24);
            //console.log(dateCount);
            var defaultDate = new Date(selectedDate.year(), selectedDate.month(), selectedDate.date());
            //var datecal = f.add("days", -1);
            //console.log(dateCount);
            ELEMENTMEETINGEVENTS = [];
            scheduler.clearAll();
            //for (var i = 0; i < dateCount; i++) {
            //    GetElementMeetingEvents(datecal.add("days", 1));
            //}

            GetElementMeetingEvents(selectedDate);
            //console.log(ELEMENTMEETINGEVENTS);
            //initScheduler();
            //alert(defaultDate);
            scheduler.init('scheduler_here', defaultDate, "timeline");
            scheduler.parse(ELEMENTMEETINGEVENTS, "json");
        }

        function initScheduler() {

            scheduler.locale.labels.timeline_tab = "Timeline";
            scheduler.locale.labels.section_custom = "Section";
            scheduler.config.details_on_create = true;
            scheduler.config.details_on_dblclick = true;
            scheduler.config.xml_date = "%Y-%m-%d %H:%i";

            scheduler.config.default_date = "One day calendar - %F %d %Y";

            //===============
            //Configuration
            //===============

            var elements = BuildTreeSection();

            scheduler.createTimelineView({
                section_autoheight: false,
                name: "timeline",
                x_unit: "minute",
                x_date: "%H:%i",
                x_step: 30,
                x_size: 24,
                x_start: 16,
                x_length: 48,
                y_unit: elements,
                y_property: "section_id",
                render: "tree",
                folder_dy: 20,
                dy: 24
            });

            //===============
            //Data loading
            //===============
            scheduler.config.lightbox.sections = [
			    { name: "description", height: 130, map_to: "text", type: "textarea", focus: true },
			    { name: "custom", height: 23, type: "timeline", options: null, map_to: "section_id" }, //type should be the same as name of the tab
			    {name: "time", height: 72, type: "time", map_to: "auto" }]
            
            scheduler.config.readonly = true;
            //scheduler.config.multi_day = true;
            scheduler.init('scheduler_here', new Date(), "timeline");
            scheduler.parse(ELEMENTMEETINGEVENTS, "json");
            
        }
	
</script>

		
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
	padding: 0px;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<SharePoint:ListProperty CssClass="ms-listdescription" Property="Description" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderCalendarNavigator" runat="server">
  <SharePoint:SPCalendarNavigator id="CalendarNavigatorId" runat="server"/>
  <ApplicationPages:CalendarAggregationPanel id="AggregationPanel" runat="server"/>
</asp:Content>